<script setup>
import LfTextArea from '@/components/commonUI/LfTextArea.vue'
import LfInput from '@/components/commonUI/LfInput.vue'
import LfButton from '@/components/commonUI/LfButton.vue'
import { postAddVote, postUpdateVote } from '@/axios/api/posts'
import { ElMessage } from 'element-plus'
import { onMounted } from 'vue'
const props = defineProps({
  topicId: undefined,
  discussId: undefined,
  onSubmitSuccess: Function,
  voteInfo: Object,
  isEdit: Boolean,
})

const voteValidity = [
  {
    label: '1天',
    value: 1,
  },
  {
    label: '7天',
    value: 2,
  },
  {
    label: '30天',
    value: 3,
  },
  {
    label: '90天',
    value: 4,
  },
]

// 使用ref来存储选项列表
const voteOptions = ref(['', '']) // 初始化两个空选项
const content = ref('')
const voteTitle = ref('')
const voteValidityActive = ref(0)
const voteType = ref(1)

onMounted(() => {
  console.log('props.voteInfo', props.voteInfo)

  if (props.voteInfo) {
    voteTitle.value = props.voteInfo.title
    content.value = props.voteInfo.content
    voteOptions.value = props.voteInfo.options.map((option) => option.content)
    voteValidityActive.value = 1
    voteType.value = props.voteInfo.type
    // content.value = props.voteInfo.content
    console.log('voteOptions.value content', voteOptions.value)
    // voteValidityActive.value = props.voteInfo.expireTime
  }
})

// 添加新选项的方法
const addOption = () => {
  voteOptions.value.push('')
}

const onVoteTitleChange = (e) => {
  voteTitle.value = e.target.value
}

const onVoteOptionChange = (e, index) => {
  voteOptions.value[index] = e.target.value
}

const onVoteValidityChange = (index) => {
  voteValidityActive.value = index
}

const onContentChange = (e) => {
  content.value = e.target.value
}

const submitVote = () => {
  if (!props.topicId) {
    ElMessage.error('请选择主题')
    return
  }

  if (!voteTitle.value) {
    ElMessage.error('请输入投票标题')
    return
  }

  // 判断投票选项是否至少有两个，切要有内容
  if (voteOptions.value.length < 2) {
    ElMessage.error('请至少添加两个投票选项')
    return
  }

  if (voteOptions.value.some((option) => !option)) {
    ElMessage.error('投票选项不能为空')
    return
  }

  if (props.voteInfo) {
    postUpdateVote({
      id: props.voteInfo.id,
      topicId: props.topicId,
      discussId: props.discussId,
      content: content.value,
      voteTitle: voteTitle?.value,
      voteType: voteType.value,
      voteOptions: voteOptions.value.map((option) => ({ value: option })),
      expireTime: 0,
      // expireTime: voteValidity[voteValidityActive.value]?.value,
    }).then((res) => {
      if (res.code === 500) {
        return
      }

      props.onSubmitSuccess()
    })
  } else {
    postAddVote({
      topicId: props.topicId,
      discussId: props.discussId,
      content: content.value,
      voteTitle: voteTitle?.value,
      voteType: voteType.value,
      voteOptions: voteOptions.value.map((option) => ({ value: option })),
      expireTime: voteValidity[voteValidityActive.value]?.value,
    }).then((res) => {
      if (res.code === 500) {
        return
      }

      props.onSubmitSuccess()
    })
  }
}

// 导出
defineExpose({
  submitVote,
})
</script>
<template>
  <div class="flex flex-col gap-6">
    <LfTextArea :modelValue="content" placeholder="请输入帖子内容" class="!h-[100px]" :onChange="onContentChange" />

    <div class="border-1 border-slate-200 rounded-md">
      <div class="p-3 border-b-1 border-slate-200">
        <!-- @change="onVoteTitleChange" -->

        <input :readonly="isEdit" v-model="voteTitle" type="text" maxlength="50" placeholder="请输入投票标题"
          class="w-full h-[40px] px-4 focus:outline-1 focus:outline-[#4757d1]" />
      </div>

      <div class="p-3 border-b-1 border-slate-200 flex flex-col gap-2 pr-[50px]">
        <div v-for="(option, index) in voteOptions" class="relative">
          <LfInput :disabled="isEdit" :key="index" :values="option" placeholder="请输入投票选项" @change="(e) => onVoteOptionChange(e, index)" />
          <button v-if="!isEdit" class="absolute -right-10 top-2 text-[red] cursor-pointer" @click="voteOptions.splice(index, 1)">
            删除
          </button>
        </div>

        <div class="flex justify-end" v-if="!isEdit && voteOptions.length < 9">
          <LfButton type="primary" :onClick="addOption">添加选项</LfButton>
        </div>
      </div>
      <div class="p-3 font-medium">
        <div>投票类型</div>
          <el-radio-group v-model="voteType" :disabled="isEdit">
            <el-radio :value="1" size="large">单选项</el-radio>
            <el-radio :value="2" size="large">多选项</el-radio>
          </el-radio-group>
      </div>
      <div class="p-3">
        <div class="text-sm font-medium">投票有效期</div>

        <div class="flex gap-2 py-2" v-if="!isEdit">
          <div v-for="(item, index) in voteValidity" :key="item.value"
            class="px-3 py-1 bg-[#f0f0f0] rounded-full text-sm cursor-pointer"
            :class="{ '!bg-[#2e5592] text-white': voteValidityActive === index }" @click="onVoteValidityChange(index)">
            {{ item.label }}
          </div>
        </div>
        <div v-else> {{ props.voteInfo.time }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
